<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询所有用户</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<style>
    p{
        display: inline;
    }
    #id{
        margin-left: 15px;
    }
    td,th{
        border: solid black 1px;
    }
	html body {
	margin:0px;padding:0px}
	li{
	display: inline;
	margin-right:25px;
    padding-top:15px!important;
	}
	ul{
	margin-top:0px;
	padding-top:12px;
	}
	#One{
	margin-left:10%;
	}
	a{
	font-size:25px
	}
	#CD{
	height:60px;
	background-color:blue;
	}
	a{
	text-decoration:none
	}
	a a:link{
	color:white;
	}
	a:visited{
	color:white;
	}
	a:active{
	color:white;
	}
	a:hover {
	color:red;
	}
	#nr{
	margin-top:5%;
	margin-left:10%;}
</style>
<body>
<div  id="CD">
<ul>
<li id="One"><a href="findAllUser.html" >查询所有</a></li>
<li><a href="findOneUser.html" >查询单个</a></li>
<li><a href="save.html" >增加</a></li>
<li><a href="update.html" >删除</a></li>
<li><a href="update.html" >修改</a></li>
</ul>
</div>
<div id="nr">
<h1>查询所有用户</h1>

<button>发送请求</button>


<table id="mytab" border="1">
    <tr id="htr">
        <th>#</th>
        <th>名</th>
        <th>姓</th>
        <th>邮箱</th>
        <th>手机号</th>
        <th>生日</th>
    </tr>
</table>
</div>
<script>
    $(document).ready(function (){
        $('button').on('click',function(){
            var $tab1 = $("#mytab");
            //alert(1);

            //var $id=$('#id').val();
            //var $username=$('#username').val();
            //var $password=$('#password').val();
            //var $age=$('#age').val();

            $.ajax({
                //alert(2);
                url : "http://192.168.0.120:8080/customers",
                type : 'GET',
                dataType : 'json',
                data:'',
               // Jsonp: 'callback',

                success : function(data) { // 数据状态success
				$("#htr").nextAll().remove();
                  //  alert(3);
                    console.log(data);
                   for(var i=0;i<data.length;i++){
                        $tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>"+ data[i].email + "</td><td>"
                            + data[i].mobile+ "</td><td>"
                            + data[i].dateOfBirth + "</td></tr>" );

                    }

                }
            });
        })
    })

    //
    //                            _ooOoo_
    //                           o8888888o
    //                           88" . "88
    //                           (| -_- |)
    //                           O\  =  /O
    //                        ____/`---'\____
    //                      .'  \\|     |//  `.
    //                     /  \\|||  :  |||//  \
    //                    /  _||||| -:- |||||-  \
    //                    |   | \\\  -  /// |   |
    //                    | \_|  ''\---/''  |   |
    //                    \  .-\__  `-`  ___/-. /
    //                  ___`. .'  /--.--\  `. . __
    //               ."" '<  `.___\_<|>_/___.'  >'"".
    //              | | :  `- \`.;`\ _ /`;.`/ - ` : | |
    //              \  \ `-.   \_ __\ /__ _/   .-` /  /
    //         ======`-.____`-.___\_____/___.-`____.-'======
    //                            `=---='
    //        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    //                     佛祖保佑       永无BUG

</script>
</body>
</html>
